<template>
  <div class="realtime">
    <div class="left">
      <div class="in">
        <div class="module">
          <div class="title">
            <div class="t">实时监测</div>
          </div>
          <div class="con-1">
            <div class="query-form">
              <el-row :gutter="10">
                <el-col :span="10">
                  <el-select
                    placeholder="请选择监测项目"
                    v-model="monitor"
                    multiple
                    style="width: 100%"
                    clearable
                  >
                    <el-option
                      v-for="(item, index) in monitorList"
                      :key="index"
                      :value="item"
                      :label="item"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select
                    placeholder="请选择监测时间段"
                    v-model="times"
                    clearable
                  >
                    <el-option
                      v-for="item in timesList"
                      :key="item.name"
                      :value="item.name"
                      :label="item.name"
                    ></el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-input
                    placeholder="设置纵坐标下限值"
                    v-model="downValue"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="4">
                  <el-input
                    placeholder="设置纵坐标上限值"
                    v-model="upValue"
                    clearable
                  ></el-input>
                </el-col>
                <el-col :span="2">
                  <el-button
                    style="width: 100%"
                    type="primary"
                    @click="setUpDown()"
                    >确定</el-button
                  >
                </el-col>
              </el-row>
            </div>
            <div class="charts-box" ref="chartBox1"></div>
          </div>
        </div>
        <!-- <div class="module">
          <div class="title">
            <div class="t">煤质软监测</div>
          </div>
          <div class="con-2">
            <div class="table-box">
              <div class="table-h">
                <p>水分（%）</p>
                <p>灰分（%）</p>
                <p>硫分（%）</p>
                <p>发热量（kcal/kg）</p>
              </div>
              <div class="table-c">
                <p>{{ mzMonitor.water }}</p>
                <p>{{ mzMonitor.ash }}</p>
                <p>{{ mzMonitor.sulfur }}</p>
                <p>{{ mzMonitor.caloric_value }}</p>
              </div>
            </div>
          </div>
        </div> -->
        <div class="module">
          <div class="title">
            <div class="t">实时报警</div>
            <div
              class="set"
              style="
                display: flex;
                align-items: center;
                justify-content: end;
                padding-top: 0;
                padding-right: 6%;
              "
            >
              <el-button size="small" type="primary" @click="mp3PlayFn">{{
                mp3PlayText
              }}</el-button>
              <el-button size="small" type="primary" @click="fzBoxShow()"
                >阈值设置</el-button
              >
              <el-row :gutter="15">
                <!-- <el-col :span="4">
                  <span>燃煤发热量报警阀值</span>
                </el-col>
                <el-col :span="7">
                  <div class="val">
                    <el-input v-model="hotValue"></el-input>
                    <b>kcal/kg</b>
                  </div>
                </el-col>
                <el-col :span="4">
                  <span>燃煤硫分报警阀值</span>
                </el-col>
                <el-col :span="6">
                  <div class="val">
                    <el-input v-model="liuValue"></el-input>
                    <b>%</b>
                  </div>
                </el-col> -->
              </el-row>
            </div>
          </div>
          <div class="con-3">
            <div class="table-box">
              <div class="table-h">
                <p>报警时间</p>
                <p>报警内容</p>
                <p style="white-space: nowrap">持续时间(min)</p>
              </div>
              <ul class="table-c">
                <li v-for="item in warningList" :key="item.start">
                  <p>
                    {{ item.start ? getFormatTime(item.start * 1000) : "" }}
                  </p>
                  <p>
                    {{
                      item.state && item.state.text
                        ? item.state.text
                        : item.state
                    }}
                  </p>
                  <p>{{ item.duration }}</p>
                </li>
              </ul>
            </div>
            <div class="charts-box" ref="chartBox2"></div>
            <!-- <div class="legend"></div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 右侧 -->
    <div class="right">
      <div class="in">
        <div class="module">
          <div class="title">
            <div class="t">实时云图</div>
            <!-- <div class="set set-right">
              <el-row :gutter="15">
                <el-col :span="7">
                  <span>测点温度变色阈值</span>
                </el-col>
                <el-col :span="10">
                  <div class="val">
                    <el-input v-model="tempValue"></el-input>
                    <b>℃</b>
                  </div>
                </el-col>
                <el-col :span="7">
                  <el-button style="width: 100%" type="primary">设置</el-button>
                </el-col>
              </el-row>
            </div> -->
          </div>
          <div class="con-4">
            <div ref="chartBox3" class="echartsHeatMap"></div>
            <!-- 云图测点 normal 正常 warn 异常 -->
            <div class="chartBox3-bg">
              <div
                class="b1 point"
                :class="{
                  normal:
                    measuringPointsData.l1.state == '正常' ||
                    measuringPointsData.l1.state == '清焦中',
                  warn: measuringPointsData.l1.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>L1 {{ measuringPointsData.l1.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.l1 ? measuringPointsData.l1.state : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('l1')"></div>
              </div>
              <div
                class="b2 point"
                :class="{
                  normal:
                    measuringPointsData.l2.state == '正常' ||
                    measuringPointsData.l2.state == '清焦中',
                  warn: measuringPointsData.l2.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>L2 {{ measuringPointsData.l2.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.l2.state
                        ? measuringPointsData.l2.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('l2')"></div>
              </div>
              <div
                class="f1 point"
                :class="{
                  normal:
                    measuringPointsData.r2.state == '正常' ||
                    measuringPointsData.r2.state == '清焦中',
                  warn: measuringPointsData.r2.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>R2 {{ measuringPointsData.r2.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.r2.state
                        ? measuringPointsData.r2.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('r2')"></div>
              </div>
              <div
                class="f2 point"
                :class="{
                  normal:
                    measuringPointsData.r1.state == '正常' ||
                    measuringPointsData.r1.state == '清焦中',
                  warn: measuringPointsData.r1.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>R1 {{ measuringPointsData.r1.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.r1.state
                        ? measuringPointsData.r1.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('r1')"></div>
              </div>
              <div
                class="l1 point normal"
                :class="{
                  normal:
                    measuringPointsData.f2.state == '正常' ||
                    measuringPointsData.f2.state == '清焦中',
                  warn: measuringPointsData.f2.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>F2 {{ measuringPointsData.f2.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.f2.state
                        ? measuringPointsData.f2.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('f2')"></div>
              </div>
              <div
                class="l2 point"
                :class="{
                  normal:
                    measuringPointsData.f1.state == '正常' ||
                    measuringPointsData.f1.state == '清焦中',
                  warn: measuringPointsData.f1.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>F1 {{ measuringPointsData.f1.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.f1.state
                        ? measuringPointsData.f1.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('f1')"></div>
              </div>
              <div
                class="r1 point"
                :class="{
                  normal:
                    measuringPointsData.b1.state == '正常' ||
                    measuringPointsData.b1.state == '清焦中',
                  warn: measuringPointsData.b1.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>B1 {{ measuringPointsData.b1.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.b1.state
                        ? measuringPointsData.b1.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('b1')"></div>
              </div>
              <div
                class="r2 point"
                :class="{
                  normal:
                    measuringPointsData.b2.state == '正常' ||
                    measuringPointsData.b2.state == '清焦中',
                  warn: measuringPointsData.b2.state == '测点异常',
                }"
              >
                <div class="info">
                  <div>B2 {{ measuringPointsData.b2.temperature }}℃</div>
                  <div class="state">
                    {{
                      measuringPointsData.b2.state
                        ? measuringPointsData.b2.state
                        : ""
                    }}
                  </div>
                </div>
                <div class="state-bar" v-show="slagData.includes('b2')"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频 -->
    <div class="right-video">
      <div class="in">
        <div class="module">
          <div class="title">
            <div class="t">实时视频</div>
          </div>
          <div class="con-top">
            <div class="video-box">
              <div class="time-big">
                <img src="../assets/img/big.png" @click="showBigFn()" />
              </div>
              <div class="video-tag">
                <video
                  id="video-one"
                  class="video-js vjs-default-skin"
                  autoplay
                ></video>
              </div>
            </div>
            <!-- <div class="video-box">
              <div class="time-big">
                <p>2024-06-22</p>
                <img src="../assets/img/big.png" />
              </div>
              <video id="video-two" class="video-js vjs-default-skin" autoplay></video>
            </div> -->
          </div>
        </div>
        <div class="module">
          <div class="title">
            <div class="t">油枪投运记录</div>
          </div>
          <div class="con-bottom">
            <div class="table-box">
              <div class="table-h">
                <p style="width: 34%">报警时间</p>
                <p>投入油枪</p>
                <p>持续时间（min）</p>
              </div>
              <ul class="table-c">
                <li v-for="item in oilList" :key="item.start">
                  <p style="width: 34%">
                    {{
                      typeof item.start == "number"
                        ? getFormatTime(item.start * 1000)
                        : item.start
                    }}
                  </p>
                  <p>{{ item.oil_gun }}</p>
                  <p>{{ item.duration }}分</p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 视频放大弹窗 -->
    <div class="video-mask" v-if="bigVideoOpen"></div>
    <div class="video-big-box" v-if="bigVideoOpen">
      <div class="in-video-big-box">
        <div class="even">
          <div class="time-close">
            <!-- <p>2024-06-22</p> -->
            <img src="../assets/img/close.png" @click="hideBigFn()" />
          </div>
          <div class="video-tag">
            <video
              id="video-one-big"
              class="video-js vjs-default-skin"
              autoplay
            ></video>
          </div>
        </div>
        <!-- <div class="even">
          <div class="time-close">
            <p>2024-06-22</p>
            
          </div>
        </div> -->
      </div>
    </div>
    <!-- <div class="map3">
		<audio :src="code1" autoplay></audio>
	</div> -->

    <!-- 阈值设置 -->
    <div class="mask" v-show="fzOpen"></div>
    <div class="fz-box" v-show="fzOpen">
      <div class="in-fz-box">
        <h3>报警阈值设置</h3>
        <el-row class="even">
          <el-col :span="10" class="label">燃煤发热量报警阈值</el-col>
          <el-col :span="10" class="val">
            <el-input v-model="hotValue"></el-input>
          </el-col>
          <el-col class="unit" :span="4">kcal/kg</el-col>
        </el-row>

        <el-row class="even">
          <el-col :span="10" class="label">燃煤硫分报警阈值</el-col>
          <el-col :span="10" class="val">
            <el-input v-model="liuValue"></el-input>
          </el-col>
          <el-col class="unit" :span="4">%</el-col>
        </el-row>

        <el-row class="even">
          <el-col :span="10" class="label">炉膛负压报警上限</el-col>
          <el-col :span="10" class="val">
            <el-input v-model="fyUp"></el-input>
          </el-col>
          <el-col class="unit" :span="4">kPa</el-col>
        </el-row>

        <el-row class="even">
          <el-col :span="10" class="label">炉膛负压报警下限</el-col>
          <el-col :span="10" class="val">
            <el-input v-model="fyDown"></el-input>
          </el-col>
          <el-col class="unit" :span="4">kPa</el-col>
        </el-row>
        <el-row class="even">
          <div class="btn-box">
            <div class="btn" @click="fzBoxHide()">取消</div>
            <div class="btn" @click="setFz()">确定</div>
          </div>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script setup>
var giftImageUrl =
  "";
import * as echarts from "echarts";
import { toRefs, onMounted, ref, nextTick, onActivated } from "vue";
import { ElMessage } from "element-plus";
import {
  listMonitor,
  initRealtime,
  fzSet,
  getHistoryChart,
  valueFz,
} from "../http/api.js";

// 视频
import "video.js/dist/video-js.css";
import videojs from "video.js";

const chartBox1 = ref(null);
let chartOne = undefined;
const chartBox2 = ref(null);
let chartTwo = undefined;

let chatMap = null;
const chartBox3 = ref(null);
const data = reactive({
  monitor: undefined,
  monitorList: [],
  source: undefined,
  realData: {},
  times: undefined,
  maxV: undefined,
  minV: undefined,
  timesList: [
    {
      id: 1,
      name: "5min",
    },
    {
      id: 2,
      name: "10min",
    },
    {
      id: 3,
      name: "1h",
    },
    {
      id: 4,
      name: "4h",
    },
    {
      id: 5,
      name: "8h",
    },
    {
      id: 6,
      name: "60h",
    },
  ],
  chaJson: {
    "5min": 5,
    "10min": 10,
    "1h": 60,
    "4h": 240,
    "8h": 480,
    "60h": 3600,
  },
  downValue: undefined,
  upValue: undefined,
  hotValue: undefined,
  liuValue: undefined,
  tempValue: undefined,
  mzMonitor: {},
  warningList: [],
  oilList: [],
  measuringPointsData: {
    b1: { state: "测点异常", temperature: 1169, timestamp: 1713276762 },
    b2: { state: "清焦中", temperature: 1103, timestamp: 1713276762 },
    f1: { state: "测点异常", temperature: 1026, timestamp: 1713276762 },
    f2: { state: "正常", temperature: 1109, timestamp: 1713276762 },
    l1: { state: "清焦中", temperature: 1185, timestamp: 1713276762 },
    l2: { state: "测点异常", temperature: 1000, timestamp: 1713276762 },
    r1: { state: "正常", temperature: 1182, timestamp: 1713276762 },
    r2: { state: "正常", temperature: 1196, timestamp: 1713276762 },
  },
  fyUp: undefined,
  fyDown: undefined,
  fzOpen: false,
  bigVideoOpen: false,
  slagData: [],
  cha: "5min",
  mp3PlayText: "使用语音播报",
  mp3PlayState: false,
});
const {
  monitor,
  monitorList,
  source,
  realData,
  times,
  timesList,
  maxV,
  minV,
  downValue,
  upValue,
  hotValue,
  liuValue,
  tempValue,
  mzMonitor,
  warningList,
  oilList,
  measuringPointsData,
  fyUp,
  fyDown,
  fzOpen,
  bigVideoOpen,
  slagData,
  cha,
  chaJson,
  mp3PlayText,
  mp3PlayState,
} = toRefs(data);
var code1 = new Audio("static/mp3/code1.mp3");
var code2 = new Audio("static/mp3/code2.mp3");
var code3 = new Audio("static/mp3/code3.mp3");
var code4 = new Audio("static/mp3/code4.mp3");
var code5 = new Audio("static/mp3/code5.mp3");
var code6 = new Audio("static/mp3/code6.mp3");
var code7 = new Audio("static/mp3/code7.mp3");
var code8 = new Audio("static/mp3/code8.mp3");
var code9 = new Audio("static/mp3/code9.mp3");
var code10 = new Audio("static/mp3/code10.mp3");
var code11 = new Audio("static/mp3/code11.mp3");
var code12 = new Audio("static/mp3/code12.mp3");
var code13 = new Audio("static/mp3/code13.mp3");
var code14 = new Audio("static/mp3/code14.mp3");

getMonitorList();
getInitRealtime();

const mp3PlayFn = () => {
  mp3PlayState.value = !mp3PlayState.value;
  mp3PlayText.value = mp3PlayState.value ? "禁用语音播报" : "使用语音播报";
};
function longLink() {
  if (window.EventSource) {
    source.value = new EventSource(
      "http://121.41.120.212:8080/combustion_monitor/realtime_data"
    );

    source.value.onopen = function (event) {};

    // source.value.addEventListener(
    //   "curve",
    //   (event) => {
    //     let data = eval("(" + event.data + ")");
    //     warningList.value = data.alarm_data;
    //     mzMonitor.value = data.coal_analysis_data;
    //     measuringPointsData.value = data.measuring_points_data;
    //     //cloudData.value = data.cloud_data;
    //     getGenerateData(data.cloud_data);
    //     addSeries(data.curve_data);
    //     initPieChart();
    //     if (data.alarm_data.length > 0) {
    //       mp3Play(data.alarm_data[data.alarm_data.length - 1]);
    //     }
    //   },
    //   false
    // );
    source.value.addEventListener(
      "alarm",
      (event) => {
        let data = eval("(" + event.data + ")");
        warningList.value = data.data;
        initPieChart(data.pie_charts);
        if (data.data && data.data.length >= 1) {
          mp3Play(data.data[data.length - 1]);
        }
      },
      false
    );
    source.value.addEventListener(
      "curve",
      (event) => {
        let data = eval("(" + event.data + ")");
        addSeries(data);
      },
      false
    );
    source.value.addEventListener(
      "cloud",
      (event) => {
        let data = eval("(" + event.data + ")");
        getGenerateData(data);
      },
      false
    );
    source.value.addEventListener(
      "measuring_points",
      (event) => {
        let data = eval("(" + event.data + ")");
        measuringPointsData.value = data;
      },
      false
    );
    // source.value.addEventListener(
    //   "coal_analysis",
    //   (event) => {
    //     let data = eval("(" + event.data + ")");
    //     mzMonitor.value = data;
    //   },
    //   false
    // );
    source.value.addEventListener(
      "oil",
      (event) => {
        let data = eval("(" + event.data + ")");
        oilList.value = data;
      },
      false
    );
    source.value.addEventListener(
      "slag",
      (event) => {
        let data = eval("(" + event.data + ")");
        slagData.value = data.location;
      },
      false
    );

    source.value.onerror = function (event) {
      source.value.close();
      longLink();
    };
  }
}
function getMonitorList() {
  monitorList.value = [];
  listMonitor().then((res) => {
    monitorList.value = [
      ...res.wall_front,
      ...res.wall_back,
      ...res.wall_left,
      ...res.wall_right,
    ];
    monitorList.value.map((item, index) => {
      monitor.value.push(item);
    });
    //console.log("monitorList.value",monitorList.value,res);
    initChart();
  });
}
function getInitRealtime() {
  console.log(11);

  warningList.value = [];
  // mzMonitor.value = {};
  initRealtime().then((res) => {
    warningList.value = res.alarm_data;
    // mzMonitor.value = res.coal_analysis_data;
    measuringPointsData.value = res.measuring_points_data;
    getGenerateData(res.cloud_data);

    if (res.slag_data) {
      slagData.value = res.slag_data.location;
    }
    console.log(res);
  });
}

function fzBoxShow() {
  fzOpen.value = true;
  valueFz().then((res) => {
    hotValue.value = res.caloric_value;
    liuValue.value = res.sulfur;
    fyDown.value = res.pressure_lower_limit;
    fyUp.value = res.pressure_upper_limit;
  });
}
function fzBoxHide() {
  hotValue.value = undefined;
  liuValue.value = undefined;
  fyUp.value = undefined;
  fyDown.value = undefined;
  fzOpen.value = false;
}
function setFz() {
  fzSet({
    caloric_value: Number(hotValue.value),
    sulfur: Number(liuValue.value),
    pressure_lower_limit: Number(fyDown.value),
    pressure_upper_limit: Number(fyUp.value),
  }).then((res) => {
    ElMessage({
      message: "设置成功",
      type: "success",
      duration: 5 * 1000,
    });
  });
  fzBoxHide();
}
function setUpDown() {
  getChartFn();
  chartOne.setOption({
    yAxis: {
      max: upValue.value ? upValue.value : maxV.value + 50,
      min: downValue.value
        ? downValue.value
        : minV.value - 50 < 0
        ? 0
        : minV.value - 50,
    },
  });
}
function addSeries(arr) {
  if (arr.length > 0) {
    for (let i = 0; i < arr.length; i++) {
      let item = arr[i];
      if (realData.value[item.name]) {
        let value = item.value ? item.value.toFixed(2) : 0;
        if (Number(value) < minV.value) {
          minV.value = Number(value);
        }
        if (Number(value) > maxV.value) {
          maxV.value = Number(value);
        }
        timeCha(item);
        realData.value[item.name].push([item.timestamp * 1000, value]);
      }
    }
  }
  let yData = [];
  for (let key in realData.value) {
    let json = {
      name: key,
      type: "line",
      lineStyle: {
        normal: {
          width: 2,
        },
      },
      showSymbol: false,
      smooth: true,
      data: realData.value[key],
    };

    yData.push(json);
  }
  chartOne.setOption({
    series: yData,
  });
}

function timeCha(item) {
  let arr = realData.value[item.name];
  if (arr && arr.length > 0) {
    let last = item.timestamp * 1000;
    if (last - arr[0][0] > chaJson.value[cha.value] * 60 * 1000) {
      for (let i = 0; i < arr.length; i++) {
        let first = arr[i][0];
        if (last - first > chaJson.value[cha.value] * 60 * 1000 - 10000) {
          arr.shift();
          i--;
        } else {
          break;
        }
      }
    }
  }
}

function initChart() {
  times.value = "5min";
  //monitor.value = monitorList;
  getChartFn();
}

// 焦鑫婷 - 图表
// 下拉改变时

function getChartFn() {
  if (chartOne) {
    chartOne.clear();
    chartOne = null;
  }
  cha.value = times.value;
  realData.value = {};
  let sEtime = getStartEndTime();
  let params = {
    start_time: sEtime.start,
    end_time: sEtime.end,
    time_unit: times.value,
  };

  callbackChart(params);
}
function callbackChart(params) {
  let queryStr = "";

  for (let i = 0; i < monitor.value.length; i++) {
    queryStr += "variable=" + monitor.value[i].toLowerCase() + "&";
  }
  getHistoryChart(params, queryStr).then((allRes) => {
    let res = allRes;
    for (let i = 0; i < res.length; i++) {
      let item = res[i];
      let key = item.name;
      let serData = realData.value[key];
      if (!serData) {
        serData = [];
        realData.value[key] = serData;
      }
      let value = res[i].value ? res[i].value.toFixed(2) : 0;
      serData.push([new Date(res[i].timestamp).getTime(), value]);
      if (!minV.value) {
        minV.value = Number(value);
      }
      if (!maxV.value) {
        maxV.value = Number(value);
      }
      if (Number(value) < minV.value) {
        minV.value = Number(value);
      }
      if (Number(value) > maxV.value) {
        maxV.value = Number(value);
      }
    }
    drawChart();
    if (source.value) {
      source.value.close();
    }
    longLink();
  });
}
function drawChart() {
  if (!chartOne) {
    chartOne = echarts.init(chartBox1.value, "macarons");
  }
  let yData = [];
  for (let key in realData.value) {
    // realData.value[key] = []; // 需要历史记录注释掉这一行
    let json = {
      name: key,
      type: "line",
      lineStyle: {
        normal: {
          width: 2,
        },
      },
      showSymbol: false,
      smooth: true,
      data: realData.value[key],
    };

    yData.push(json);
  }
  let option = {
    legend: {
      show: true,
      top: 0,
      textStyle: { color: "#ffffff" },
    },
    tooltip: {
      show: true,
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
      axisPointer: {
        animation: false,
      },
      cofine: true,
    },
    grid: {
      top: 30,
      left: 30,
      right: 30,
      bottom: 0,
      containLabel: true,
    },
    xAxis: [
      {
        type: "time",
        // data: xData,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          rotate: 0, // 将文字旋转 45 度
          padding: [0, 5, 0, 5], //文字左右定位
          textStyle: {
            color: "#dedede",
            fontSize: "14", //文字大小
          },
          formatter: (value, index) => {
            let dateTime = getFormatTime(value);
            return dateTime.split(" ")[1];
          },
        },
      },
    ],
    yAxis: {
      max: 1500,
      min: 400,
      name: "温度/℃",
      nameTextStyle: {
        color: "#dedede",
        padding: [0, 0, 15, 35], //表示[上,右,下,左]的边距
      },
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(227,227,227,0.2)",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#dedede",
        },
      },
      axisTick: {
        show: false,
      },
    },
    series: yData, // 需要历史记录放开这一行
    series: [],
    animationDuration: 0,
    animationEasing: "cubicInOut",
  };
  chartOne.setOption(option, true);
}
// 时间方法
function getStartEndTime() {
  let curDate = new Date().getTime();
  return {
    start: getFormatTime(curDate - (chaJson.value[cha.value] / 2) * 60 * 1000),
    end: getFormatTime(curDate),
  };
}
function getFormatTime(stamp) {
  // stamp = stamp * 1000;
  let year = new Date(stamp).getFullYear();
  let month = new Date(stamp).getMonth() + 1;
  month = month < 10 ? "0" + month : month;
  let date = new Date(stamp).getDate();
  date = date < 10 ? "0" + date : date;
  return (
    year +
    "-" +
    month +
    "-" +
    date +
    " " +
    new Date(stamp).toLocaleTimeString("chinese", { hour12: false })
  );
}
function initPieChart(data) {
  let serData = [];
  let count = 0;
  for (let key in data) {
    serData.push({
      name: key,
      value: data[key],
    });
    count += data[key];
  }
  if (!chartTwo) {
    chartTwo = echarts.init(chartBox2.value, "macarons");
  }
  let option = {
    backgroundColor: "transparent",
    graphic: {
      elements: [
        {
          type: "image",
          style: {
            image: giftImageUrl,
            width: 30,
            height: 30,
          },
          left: "center",
          top: "28%",
        },
      ],
    },
    title: {
      text: "今日报警总次数 " + count,
      textStyle: {
        color: "#f2f2f2",
        fontSize: 16,
        // align: 'center'
      },
      x: "center",
      y: "60%",
    },
    tooltip: {
      trigger: "item",
    },
    grid: {
      bottom: 30,
      left: 20,
      right: 20,
    },
    legend: {
      orient: "vertical",
      right: "center",
      top: "69%",
      textStyle: {
        color: "#f2f2f2",
        fontSize: 14,
      },
      icon: "roundRect",
      data: serData,
      formatter: (name, index) => {
        let data = serData;
        let total = 0;
        let tarValue = 0;
        for (let i = 0, l = data.length; i < l; i++) {
          total += parseInt(data[i].value);
          if (data[i].name == name) {
            tarValue = data[i].value;
          }
        }
        let arr = [name + " " + tarValue];
        if (name == data[data.length - 1].name) {
          arr = [name + " " + tarValue];
        }
        return arr.join("");
      },
    },
    series: [
      // 主要展示层的
      {
        radius: ["45%", "60%"],
        center: ["50%", "35%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        data: serData,
      },
      // 边框的设置
      {
        radius: ["45%", "52%"],
        center: ["50%", "35%"],
        type: "pie",
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          },
        },
        animation: false,
        tooltip: {
          show: false,
        },
        data: [
          {
            value: 1,
            itemStyle: {
              color: "rgba(250,250,250,0.3)",
            },
          },
        ],
      },
      {
        name: "外边框",
        type: "pie",
        clockWise: false, //顺时加载
        hoverAnimation: false, //鼠标移入变大
        center: ["50%", "35%"],
        radius: ["65%", "65%"],
        label: {
          normal: {
            show: false,
          },
        },
      },
    ],
  };
  chartTwo.setOption(option, true);
}

const getGenerateData = (allData) => {
  let data = allData.cloud_data;
  if (data) {
    let xData = [];
    let yData = [];
    // xData.value = [];
    // yData.value = [];
    data.map((item) => {
      if (xData.indexOf(item[0]) === -1) {
        xData.push(item[0]);
      }
      if (yData.indexOf(item[1]) === -1) {
        yData.push(item[1]);
      }

      //item[2] = item[2] /10000 +0.5
    });
    initEchartsChatMap(xData, yData, data);
  }
  //let data = cloudData.value = data.cloud_data
};
const initEchartsChatMap = (xData, yData, data) => {
  let option = {
    tooltip: {},
    xAxis: {
      type: "category",
      data: xData,
      show: false,
    },
    yAxis: {
      type: "category",
      data: yData,
      show: false,
    },
    grid: {
      top: "24%",
      bottom: "34%",
      left: "25%",
      right: "25%",
    },
    visualMap: [
      {
        min: 1100,
        max: 1700,
        top: "85%",
        left: "20%",
        itemHeight: 400,
        calculable: true,
        realtime: false,
        orient: "horizontal",
        inRange: {
          color: [
            "#0001AB",
            "#0000DA",
            "#0000FD",
            "#0050FD",
            "#0093FB",
            "#06FFFF",
            "#8EFE71",
            "#FEFF00",
            "#FD9D04",
            "#FE3701",
            "#D00000",
            "#8A0000",
          ],
        },
        textStyle: {
          color: "#ffffff",
        },
      },
      {
        min: 1100,
        max: 1700,
        left: "20%",
        top: "93%",
        showLabel: !0,
        text: ["℃", ""],
        seriesIndex: 1,
        textStyle: {
          color: "#ffffff",
        },
        selectedMode: false,
        orient: "horizontal",
        pieces: [
          {
            gt: 1700,
            lte: 1800,
            label: "结焦高风险区域",
            color: "#FE3701",
          },
          {
            gte: 1500,
            lte: 1700,
            label: "1500-1700",
            color: "#8EFE71",
          },
          {
            gte: 1500,
            lt: 1300,
            label: "1300-1500",
            color: "#0093FB",
          },
          {
            gt: 1100,
            lt: 1300,
            label: "1100-1300",
            color: "#0001AB",
          },
        ],
        show: !0,
      },
    ],
    series: [
      {
        name: "Gaussian",
        type: "heatmap",
        data: data,
        emphasis: {
          itemStyle: {
            borderColor: "#333",
            borderWidth: 0,
          },
        },
        itemStyle: {
          borderWidth: 0.01,
        },
        progressive: 0,
        progressiveThreshold: 9000,
        animation: false,
        hoverAnimation: false,
        universalTransition: true,
      },
    ],
  };
  if (chatMap) {
    chatMap.setOption({
      series: {
        data: data,
      },
    });
  } else {
    chatMap = echarts.init(chartBox3.value, "macarons");
    chatMap.setOption(option);
  }
};

function mp3Play(item) {
  // var event = new MouseEvent("click", {
  //   view: window,
  //   bubbles: true,
  //   cancelable: false,
  // });
  // let div = document.body;
  // div.dispatchEvent(event);
  if (!mp3PlayState.value) {
    return false;
  }
  if (item) {
    let code = item.state.code ? item.state.code : item.code;
    switch (code) {
      case "001":
        code1.play();
        break;
      case "002":
        code2.play();
        break;
      case "003":
        code3.play();
        break;
      case "004":
        code4.play();
        break;
      case "005":
        code5.play();
        break;
      case "006":
        code6.play();
        break;
      case "007":
        code7.play();
        break;
      case "008":
        code8.play();
        break;
      case "009":
        code9.play();
        break;
      case "010":
        code10.play();
        break;
      case "011":
        code11.play();
        break;
      case "012":
        code12.play();
        break;
      case "013":
        code13.play();
        break;
      case "014":
        code14.play();
        break;
    }
  }
  code1.addEventListener("loadeddata", function (e) {
    // 当音频的元数据加载完成后，我们可以尝试播放音频
    code1.play();
  });
  // audio.addEventListener('error', function(error) {
  //     console.error('音频播放出错:', error);
  // });
}
function showBigFn() {
  bigVideoOpen.value = true;
  let player1;
  nextTick(() => {
    player1 = videojs("video-one-big", options(""), () => {
      //121.41.120.212/hls/stream.m3u8
      http: player1.play();
    });
  });
}
function hideBigFn() {
  bigVideoOpen.value = false;
}
function options(src) {
  return {
    autoplay: true,
    muted: true,
    loop: true,
    controls: false,
    preload: "auto",
    language: "zh-CN",
    fluid: true,
    sources: [
      {
        type: "application/x-mpegURL",
        src,
      },
    ],
    notSupportedMessage: "此视频暂无法播放",
    textTrackDisplay: false,
  };
}
let player;
let _player;
onMounted(() => {
  // initEchartsChatMap();
  // mp3Play();
  player = videojs(
    "video-one",
    options("http://121.41.120.212/hls/stream.m3u8"),
    () => {
      player.play();
    }
  );
});
onActivated(() => {
  player = videojs(
    "video-one",
    options("http://121.41.120.212/hls/stream.m3u8"),
    () => {
      player.play();
    }
  );
});
</script>
<style lang="scss" scoped>
.realtime {
  height: 100%;
  display: flex;
  justify-content: space-between;
  .left,
  .right,
  .right-video {
    width: calc(44% - 0.75vw);
    border: 0.05vw solid #1175df;
    height: 100%;
    padding: 0.4vw;
    .in {
      height: 100%;
      box-shadow: 0 0 0.9vw #1175df inset;
      padding: 1vw 0;
    }
    // :deep(.video-one-dimensions.vjs-fluid:not(.vjs-audio-only-mode)) {
    //   padding-top: 42% !important;
    // }
    .module {
      .title {
        height: 4.8vh;
        background: linear-gradient(
          to right,
          rgba(9, 95, 253, 0.8),
          rgba(9, 95, 253, 0)
        );
        display: flex;
        justify-content: space-between;
        .t {
          line-height: 4.8vh;
          color: #efefef;
          text-indent: 1.5vw;
          font-size: 1.2vw;
          letter-spacing: 0.05vw;
        }
        .set {
          width: 70%;
          padding-top: 0.8vh;
          padding-right: 1vw;
          span {
            height: 3.2vh;
            display: flex;
            align-items: center;
            color: #fff;
            font-size: 1.3vh;
            text-align: center;
          }
          .val {
            display: flex;
            align-items: center;
            color: #fff;
            background-color: #051b43;
            padding: 0 0.5vh;
            border-radius: 0.6vh;
            border: 0.1vh solid #095ffd;
          }
        }
        .set-right {
          width: 24vh;
        }
      }
      .con-1,
      .con-3 {
        height: calc((100vh - 28vh) / 2);
        padding: 2vh;
      }
      .con-3 {
        position: relative;
        .legend {
          position: absolute;
          width: 33%;
          top: 62%;
          right: 0;
          .even {
            color: #fff;
          }
        }
      }
      .con-4 {
        padding-bottom: 0;
        height: calc(100vh - 22vh);
        .echartsHeatMap {
          width: 100%;
          height: 100%;
        }
      }
      .con-1 {
        .charts-box {
          height: calc(100% - 4.2vh);
          margin-top: 1vh;
        }
      }
      .con-2 {
        height: 12vh;
        padding: 2vh;
        .table-box {
          border: 0.1vh solid #095ffd;
          .table-h {
            border-bottom: 0.1vh solid #095ffd;
          }

          p {
            display: inline-block;
            height: 4vh;
            width: 23%;
            border-right: 0.1vh solid #095ffd;
            text-align: center;
            line-height: 4vh;
            color: #fff;
          }
          p:last-of-type {
            border-right: none;
          }
        }
      }
      .con-3 {
        display: flex;
        justify-content: space-between;
        .table-box {
          width: 67%;
          .table-h {
            height: 2vh;
            p {
              display: inline-block;
              text-align: center;
              color: #a7a9af;
              line-height: 2vh;
              &:nth-child(1) {
                width: 40%;
              }
              &:nth-child(3) {
                width: 24%;
              }
              &:nth-child(2) {
                width: 36%;
              }
            }
          }
          .table-c {
            height: calc(100% - 3vh);
            overflow: auto;
            li {
              height: 3.2vh;
              margin-top: 1.5vh;
              background: url("../assets/img/li_bg.png") center center no-repeat;
              background-size: 100% 100%;
              p {
                display: inline-block;
                text-align: center;
                color: #fff;
                line-height: 3.2vh;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                &:nth-child(1) {
                  width: 40%;
                  padding-left: 20px;
                }
                &:nth-child(3) {
                  width: 24%;
                }
                &:nth-child(2) {
                  width: 36%;
                }
              }
            }
          }
        }
        .charts-box {
          width: 33%;
        }
      }
    }
  }
  .left {
    width: 36%;
  }
  .right {
    width: 39%;
    margin: 0 1.5vh;
  }
  // 云图背景
  .chartBox3-bg {
    width: 52%;
    height: 44%;
    position: absolute;
    left: 24%;
    top: 23%;
    background: url("../assets/img/yt_bg.png") center center no-repeat;
    background-size: 100% 100%;
    .point {
      position: absolute;
      width: 2vh;
      height: 2vh;
      z-index: 10;
      .state-bar {
        position: absolute;
        width: 6vh;
        height: 0.8vh;
        top: -0.85vh;
        left: -1.9vh;
        background-color: #f83100;
      }
      .info {
        position: absolute;
        width: 10vh;
        height: 8vh;
        background-color: #05173b;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        padding: 1vh 0;
        background-image: url("../assets/img/icon_left_top.png"),
          url("../assets/img/icon_left_bottom.png"),
          url("../assets/img/icon_right_top.png"),
          url("../assets/img/icon_right_bottom.png");
        background-position: left top, left bottom, right top, right bottom; /* 设置每张图片的位置 */
        background-repeat: no-repeat, no-repeat; /* 设置每张图片的重复方式 */
        background-size: 2vh auto; /* 设置每张图片的尺寸 */
        > div:nth-child(1) {
          color: #eaeffc;
          text-shadow: 0 0 0.8vh #0ba1d4, 0 0 0.2vh #fff, 0 0 0.2vh #fff,
            0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4,
            0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4;
        }
        .state {
          padding: 0.5vh 0.8vh;
          background-color: #0f444a;
          color: #34eb6d;
          max-width: 90%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
      &.normal {
        background-color: #01ebff;
        // border: 0.2vh solid #0c75fd;
        .state {
          background-color: #0f444a;
          color: #34eb6d;
        }
      }
      &.warn {
        background-color: #f83100;
        .state {
          background-color: #362138;
          color: #e52f07;
        }
      }
      // 上
      &.b1 {
        top: 0;
        left: 25%;
        .info {
          top: -10vh;
          left: -4vh;
        }
      }
      &.b2 {
        top: 0;
        left: calc(75% - 2vh);
        .info {
          top: -10vh;
          left: -4vh;
        }
      }
      // 下
      &.f1 {
        bottom: 0;
        left: 25%;
        .info {
          top: 4vh;
          left: -4vh;
        }
        .state-bar {
          top: 2vh;
          left: -1.9vh;
        }
      }
      &.f2 {
        bottom: 0;
        left: calc(75% - 2vh);
        .info {
          top: 4vh;
          left: -4vh;
        }
        .state-bar {
          top: 2vh;
          left: -1.9vh;
        }
      }
      // 左
      &.l1 {
        left: 0;
        top: 25%;
        .info {
          left: -12vh;
          top: -3vh;
        }
        .state-bar {
          height: 6vh;
          width: 0.8vh;
          left: -0.8vh;
          top: -1.9vh;
        }
      }
      &.l2 {
        left: 0;
        top: calc(75% - 2vh);
        .info {
          left: -12vh;
          top: -3vh;
        }
        .state-bar {
          height: 6vh;
          width: 0.8vh;
          left: -0.8vh;
          top: -1.9vh;
        }
      }
      // 右
      &.r1 {
        right: 0;
        top: 25%;
        .info {
          left: 4vh;
          top: -3vh;
        }
        .state-bar {
          height: 6vh;
          width: 0.8vh;
          left: 2.1vh;
          top: -1.9vh;
        }
      }
      &.r2 {
        right: 0;
        top: calc(75% - 2vh);
        .info {
          left: 4vh;
          top: -3vh;
        }
        .state-bar {
          height: 6vh;
          width: 0.8vh;
          left: 2.1vh;
          top: -1.9vh;
        }
      }
    }
  }
  // 右侧视频
  .right-video {
    width: 25%;
    .con-top {
      padding: 0.5vh;
      margin: 1vh;
      background-image: url("../assets/img/icon_left_top.png"),
        url("../assets/img/icon_left_bottom.png"),
        url("../assets/img/icon_right_top.png"),
        url("../assets/img/icon_right_bottom.png");
      background-position: left top, left bottom, right top, right bottom; /* 设置每张图片的位置 */
      background-repeat: no-repeat, no-repeat; /* 设置每张图片的重复方式 */
      background-size: 2vh auto; /* 设置每张图片的尺寸 */
      height: 34vh;
      .video-box {
        height: 16vw;
        background-color: #362138;
        position: relative;
        .time-big {
          position: relative;
          height: 3.6vh;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          color: #fff;
          padding: 0 1.5vh;
          z-index: 3;

          img {
            width: 2.6vh;
            height: 2.6vh;
            cursor: pointer;
          }
        }
        .video-tag {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          overflow: hidden;
          // object-fit: fill;
          video {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
      }
    }
    .con-bottom {
      padding: 1vh;
      .table-box {
        .table-h {
          background-color: #06215f;
          padding: 1vh 0;
          color: #fff;
          p {
            display: inline-block;
            text-align: center;
            &:nth-child(1) {
              width: 40%;
            }
            &:nth-child(2) {
              width: 30%;
            }
            &:nth-child(3) {
              width: 30%;
            }
          }
        }
        .table-c {
          height: 30vh;
          overflow: auto;
          li {
            padding: 1vh 0;
            color: #fff;
          }
          li:nth-child(2n) {
            background-color: #06215f;
          }
          p {
            display: inline-block;
            text-align: center;
            &:nth-child(1) {
              width: 40%;
            }
            &:nth-child(2) {
              width: 30%;
            }
            &:nth-child(3) {
              width: 30%;
            }
          }
        }
      }
    }
  }
}
.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9;
  background: rgba(0, 0, 0, 0.4);
}
.fz-box {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  .in-fz-box {
    width: 30vw;
    height: 38vh;
    background: #05173b url("../assets/img/dialog_bg.png") center center
      no-repeat;
    background-size: 100% 100%;
    h3 {
      padding-top: 4vh;
      color: #eaeffc;
      padding-bottom: 3.5vh;
      text-shadow: 0 0 0.8vh #0ba1d4, 0 0 0.2vh #fff, 0 0 0.2vh #fff,
        0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4,
        0 0 0.8vh #0ba1d4, 0 0 0.8vh #0ba1d4;
      text-align: center;
      font-size: 1.9vh;
      letter-spacing: 0.1vh;
    }
    .even {
      color: #fff;
      padding: 0 10%;
      margin-top: 2%;
      .label {
        line-height: 3.2vh;
        text-align: right;
        padding-right: 2vh;
      }
      .val {
        display: flex;
        align-items: center;
        color: #fff;
        background-color: #051b43;
        padding: 0 0.5vh;
        border-radius: 0.6vh;
        border: 0.1vh solid #095ffd;
      }
      .unit {
        line-height: 3.2vh;
        padding-left: 2vh;
      }
      .btn-box {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 2%;
        .btn {
          margin: 0 1.2vh;
          padding: 0.4vh 1.5vh;
          background-color: #095ffd;
          cursor: pointer;
        }
      }
    }
  }
}
// 视频放大弹窗
.video-mask {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 99;
  left: 0;
  top: 0;
}
.video-big-box {
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  z-index: 999;
  left: 0;
  top: 0;
  .in-video-big-box {
    display: flex;
    background-image: url("../assets/img/icon_left_top.png"),
      url("../assets/img/icon_left_bottom.png"),
      url("../assets/img/icon_right_top.png"),
      url("../assets/img/icon_right_bottom.png");
    background-position: left top, left bottom, right top, right bottom; /* 设置每张图片的位置 */
    background-repeat: no-repeat, no-repeat; /* 设置每张图片的重复方式 */
    background-size: 2vh auto; /* 设置每张图片的尺寸 */
    padding: 1.4vh;
    .even {
      width: 40vw;
      height: 60vh;
      position: relative;
      &:nth-child(1) {
        margin-right: 2vh;
      }
      .time-close {
        height: 3.6vh;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: #fff;
        padding: 0 1.5vh;
        position: relative;
        z-index: 9;
        img {
          width: 2.6vh;
          height: 2.6vh;
          cursor: pointer;
        }
      }
      .video-tag {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        video {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.realtime {
  font-size: 1.7vh !important;
}
.realtime .val .el-input__wrapper {
  box-shadow: none;
}
.realtime .query-form {
  .el-select__selection.is-near {
    display: flex;
    overflow: hidden;
    flex-wrap: nowrap;
  }
}
</style>
